<!--
 * @Descripttion:
 * @version:
 * @Author: zhuzm@linkstec.com
 * @Date: 2023-01-31 13:28:55
 * @LastEditors: sueRimn
 * @LastEditTime: 2023-05-22 09:29:12
-->
<template>
  <div class="search-list-product">
    <div
      :class="['list-item',{'minWidth':isProduct}]"
      @click="toFundDetail(item)"
      @mouseover="mouseoverFund(item)"
      @mouseout="mouseoutFund"
      v-for="(item, index) in dataFilter"
      :key="index"
    >
      <template v-if="!item.isCnjj">
        <div class="tags">
          <el-tag>{{ item.prod_type | typeByList(item.prod_type_child) }}</el-tag>
        </div>
        <div class="code" v-html="item['prod_code_v']"></div>
        <div :class="['name']" v-html="item['prod_name_v']"></div>
      </template>
      <template v-if="item.isCnjj">
        <div class="tags">
          <el-tag>场内基金</el-tag>
        </div>
        <div class="code" v-html="item['stockCode_v']"></div>
        <div :class="['name']" v-html="item['stockName_v']"></div>
      </template>
    </div>
  </div>
</template>
<script>
import _ from 'lodash';
import dictionary from '../dictionary';
export default {
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      }
    },
    max: {
      type: Number,
      default: Infinity
    },
    value: {
      type: String,
      default: ''
    },
    // 父级是否为Product组件
    isProduct: {
      type: Boolean,
      default: false
    }
  },
  inject: ['hideSearchIs'],
  data () {
    const seniorPath = '/senior/detail'; // 高端理财详情路径
    return {
      // 理财产品跳转路径
      codeToPath: {
        1: '/publicfund/fundDetail', // 公募基金详情
        3: '/IncomeReceipts/productDetail', // 收益凭证详情
        4: '/tianhuibao/productDetail', // 天汇宝详情
        7: seniorPath, // 基金专户
        9: seniorPath, // OTC资管
        'X': seniorPath, // 信托计划
        '8': seniorPath // 私募基金
      },
      // 理财产品url产品编码字段名
      codeToQuery: {
        1: 'prodCode',
        3: 'PRO_CODE',
        4: 'PROD_CODE',
        7: 'PRO_CODE',
        9: 'PRO_CODE',
        'X': 'PRO_CODE',
        '8': 'PRO_CODE'
      },
      isMouseover: false // 当前是否为移入状态
    };
  },
   filters: {
    typeByList (type, typeChild) {
      const typeList = [
        {
          name: '虚拟产品',
          prod_type: '0',
          prod_type_child: ''
        },
        {
          name: '公募基金',
          prod_type: '1',
          prod_type_child: ''
        },
        {
          name: '资管',
          prod_type: '2',
          prod_type_child: ''
        },
        {
          name: '收益凭证',
          prod_type: '3',
          prod_type_child: ''
        },
        {
          name: '其他',
          prod_type: '4',
          prod_type_child: '41'
        },
        {
          name: '天汇宝2号',
          prod_type: '4',
          prod_type_child: '45'
        },
        {
          name: '天汇宝1号',
          prod_type: '4',
          prod_type_child: '46'
        },
        {
          name: '实时盈',
          prod_type: '5',
          prod_type_child: ''
        },
        {
          name: '其他',
          prod_type: '6',
          prod_type_child: '61'
        },
        {
          name: 'OTC银行理财',
          prod_type: '6',
          prod_type_child: '62'
        },
        {
          name: '多金银行理财',
          prod_type: '6',
          prod_type_child: '63'
        },
        {
          name: '光大银行',
          prod_type: '6',
          prod_type_child: '64'
        },
        {
          name: '基金专户',
          prod_type: '7',
          prod_type_child: ''
        },
        {
          name: 'OTC私募',
          prod_type: '8',
          prod_type_child: '81'
        },
        {
          name: '集中交易私募',
          prod_type: '8',
          prod_type_child: '82'
        },
        {
          name: '其他',
          prod_type: '9',
          prod_type_child: '91'
        },
        {
          name: '券商小集合',
          prod_type: '9',
          prod_type_child: '92'
        },
        {
          name: '券商大集合',
          prod_type: '9',
          prod_type_child: '93'
        },
        {
          name: '期货资管',
          prod_type: '9',
          prod_type_child: '94'
        },
        {
          name: '保险资管',
          prod_type: '9',
          prod_type_child: '95'
        },
        {
          name: '其他',
          prod_type: 'X',
          prod_type_child: 'X1'
        },
        {
          name: '上海信托',
          prod_type: 'X',
          prod_type_child: 'X2'
        },
        {
          name: '华润信托',
          prod_type: 'X',
          prod_type_child: 'X3'
        },
        {
          name: '西部信托',
          prod_type: 'X',
          prod_type_child: 'X4'
        },
        {
          name: '云南信托',
          prod_type: 'X',
          prod_type_child: 'X5'
        },
        {
          name: '华宝信托',
          prod_type: 'X',
          prod_type_child: 'X6'
        },
        {
          name: '五矿信托',
          prod_type: 'X',
          prod_type_child: 'X7'
        },
        {
          name: '结构性理财',
          prod_type: 'Z',
          prod_type_child: ''
        },
        {
          name: '财富号虑拟产品',
          prod_type: 'C',
          prod_type_child: ''
        }
      ];
      return typeList.filter(item => item.prod_type_child ? item.prod_type_child === typeChild : item.prod_type === type)[0].name;
    }
  },
  computed: {
    dataFilter () {
      if (this.max === Infinity) return this.data;
      return this.data.slice(0, this.max);
    }
  },
  methods: {
    // 查看产品的详情
    toFundDetail (row) {
      this.$emit('searchIsHide');
      if (row.isCnjj) {
        const path = dictionary.CNJJ_TYPE.filter(item => item.value.includes(row.type))[0].path;
        this.$router.push({
          path: `/cnjj/${path}`,
          query: {
            prodCode: row.stockCode
          }
        });
      } else {
        this.$router.push({
          path: this.codeToPath[row.prod_type],
          query: {
            [this.codeToQuery[row.prod_type]]: row.prod_code
          }
        });
      }
    },
    mouseoverFund: _.debounce(function (item) {
      if (!this.isProduct || this.isMouseover) return;
      if (item.prod_type === '1') {
        this.isMouseover = true;
        this.$emit('input', item.prod_code);
      } else {
        this.$emit('empty');
      }
    }, 1000),
    mouseoutFund () {
      if (!this.isProduct || !this.isProduct) return;
      this.isMouseover = false;
    }
  }
};
</script>
<style lang="scss" scoped>
@import './common.scss';
.search-list-product{
  .list-item{
    margin-bottom: 11px;
    display: flex;
    align-items: center;
    cursor: pointer;
    .tags{
      margin-right: 16px;
    }
    .code{
      margin-right: 8px;
    }
  }
  .minWidth{
    width: 400px;
    margin-right: 8px;
    .name{
      flex: 1;
      display: inline-block;
      line-height: 30px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
.el-tag{
  text-align: center;
  height: 22px;
  line-height: 22px;
  background: #EAF1FF;
  color: #2468F2;
}
</style>
